<template>
  <!--添加表和字段-->
  <el-row :gutter="5" style="height:400px">
    <el-col :span="5" style="text-align:center">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button style="margin-top: 12px;" @click="addCol()">添加字段</el-button><br>
      <nf-el-form
        v-model="tableModal"
        :partModel="partModel"
        v-bind="tableMeta"
        label-width="100px"
      >
      </nf-el-form>
      <nf-area v-bind="loadColumnMeta" v-model="loadColumn"/><br>
      <el-button style="margin-top: 12px;" @click="loadCol()">导入字段</el-button>
    </el-col>
    <el-col :span="19">
      <el-row :gutter="5">
        <el-col :span="3"> 序号 </el-col>
        <el-col :span="3"> 字段名 </el-col>
        <el-col :span="3"> 中文名 </el-col>
        <el-col :span="3"> 字段类型 </el-col>
        <el-col :span="3"> 字段大小 </el-col>
        <el-col :span="3"> 控件类型 </el-col>
        <el-col :span="3"> 说明 </el-col>
      </el-row>
      <el-scrollbar style="height:300px">
        <el-row
          :gutter="5"
          v-for="(item, index) in columnModal"
          :key="'col_' + item.columId + '_' + index"
        >
          <el-col :span="3">
            <nf-text v-bind="colItemMeta[104010]" v-model="item.columnId"/>
          </el-col>
          <el-col :span="3">
            <nf-text v-bind="colItemMeta[104040]" v-model="item.colName"/>
          </el-col>
          <el-col :span="3">
            <nf-text v-bind="colItemMeta[104050]" v-model="item.cnName"/>
          </el-col>
          <el-col :span="3">
            <nf-text2 v-bind="colItemMeta[104060]" v-model="item.colType"/>
          </el-col>
          <el-col :span="3">
            <nf-text2 v-bind="colItemMeta[104070]" v-model="item.colSize"/>
          </el-col>
          <el-col :span="3">
            <nf-selects v-bind="colItemMeta[104100]" v-model="item.controlTypes"/>
          </el-col>
          <el-col :span="3">
            <nf-text v-bind="colItemMeta[104010]" v-model="item.content"/>
          </el-col>
        </el-row>
      </el-scrollbar>
    </el-col>
  </el-row>
</template>

<script>
/* eslint-disable import/no-absolute-path */
/* eslint-disable import/first */
import { defineComponent, reactive, ref } from 'vue'

// 表单组件
import nfElForm from '/ctrl/nf-el-form/el-form-div.vue'

// 组件
import nfText from '/ctrl/nf-el-form-item/el-form-t-text.vue'
import nfArea from '/ctrl/nf-el-form-item/el-form-t-area.vue'
import nfText2 from '/ctrl/nf-el-form-item/el-form-t-autocomplete.vue'
import nfNumber from '/ctrl/nf-el-form-item/el-form-n-number.vue'
import nfSelects from '/ctrl/nf-el-form-item/el-form-s-select-cascader.vue'

// 轻量级状态
import { state } from 'nf-state'

export default {
  name: 'plat-meta-table-colmun'
}

// 获取新的字段
const getNewColumn = (id, colName, cnName, colType, size = 10, def = '', con = '') => {
  const _tmp = {
    columnId: id,
    colName: colName,
    cnName: cnName,
    colType: colType,
    colSize: size,
    defaultValue: def,
    controlType: 101,
    controlTypes: ['文本', '101'],
    content: con
  }
  return _tmp
}

// 字段的 meta
const _loadColumnMeta = reactive({
  controlId: 10110,
  colName: 'colData',
  label: '用于导入',
  controlType: 100,
  defValue: '',
  placeholder: '用于导入',
  title: '用于导入'
})

</script>

<script setup>

const props = defineProps({
  moduleId: [Number, String],
  moduleInfo: Object
})

// 获取表的表单
const tableMeta = state.platMeta.module[142].forms[14210]
tableMeta.formColCount = 1
// 获取字段的表单
const colmunMeta = state.platMeta.module[143].forms[14310]
colmunMeta.formColCount = 7

// 字段的meta
const colItemMeta = colmunMeta.itemMeta

// 表的 model
const tableModal = props.moduleInfo.tableModal
// 定义局部的 model
const partModel = reactive({})

// 字段的 model
const columnModal = props.moduleInfo.columnModal
// 定义局部的 model
const colPartModel = reactive({})

// columnModal[100] = getNewColumn(100010, 'newCol', '新字段', 'int')

// 添加新字段
const addCol = () => {
  const index = columnModal.length + 1
  const tableId = tableModal.tableId
  const colId = parseInt(tableId) * 1000 + index * 10
  columnModal.push(getNewColumn(colId, 'col_' + index, '新字段_' + index, 'int'))
}

/**
 * 导入数据生成表和字段的信息
 * 可以修改字段类型等信息
 * 往 webSQL 的 meta 里面添加表和字段
 * 如果设置模块ID的话，往 indexedDB 的 meta 里面添加 模块信息
 */

// 导入字段
const loadColumnMeta = _loadColumnMeta
const loadColumn = ref('')
const loadCol = () => {
  // 清空原有记录
  columnModal.length = 0
  const tableId = parseInt(tableModal.tableId) * 1000

  const arr = loadColumn.value.split('\n')
  // console.log(arr)
  arr.forEach((item, index) => {
    const cols = item.split('\t')
    console.log(cols)
    if (cols.length >= 6) {
      const colId = tableId + (columnModal.length + 1) * 10
      columnModal.push(getNewColumn(colId, cols[0], cols[1], cols[2], cols[3], cols[4], cols[6]))
      // setWatch(columnModal, 'c_' + id)
    }
  })
}

</script>
